import React, { Component } from 'react';
import * as fetch from '../utils/fetch';
import CODE from '../utils/codeConfig';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from 'react-native';
import Style from '../utils/style/style';
import WXStyle from '../utils/style/wxstyle';
export default class SendCode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tagValue: '获取验证码',
      phone: '',
      disable: true,
      phoneDisdbled: false
    };
  }
  componentDidMount() {
    if (this.props.Phone) {
      this.setState({
        phone: this.props.phone,
        disable: false,
        phoneDisdbled: true
      });
    }
  }
  _sendCode() {
    if (this.state.disable) {
      return;
    } else {
      if (!this.state.phone.match('^[1][34578][0-9]{9}$')) {
        //模态框
        return;
      }
      this.setState({
        tagValue: '发送中...',
        disable: true,
        phoneDisdbled: true
      });
      this._getCode();
    }
  }
  _getCode() {
    //后端获取验证码
    const { phone } = this.state;
    const { api } = this.props;
    fetch
      .request(`${api}`, 'GET', { phone: phone })
      .then(res => {
        console.log(res);
        console.log(res.code.statuCode == CODE.SUCCESS);
        if (res.code.statuCode == CODE.SUCCESS) {
          setTimeout(() => {
            this._tagTimer();
          }, 500);
        } else if (res.code.statuCode == CODE.VERIFICATION_CODE_TIME_OUT) {
          modal.showError('获取验证码服务端网络超时');
        }
      })
      .catch(e => {});
  }

  //倒数计时器
  _tagTimer() {
    let time = 180;
    console.log(time);
    const mytimer = setInterval(() => {
      time--;
      if (time > 0) {
        this.setState({
          tagValue: '获取(' + time + ')'
        });
      } else {
        this.setState({
          phoneDisdbled: false,
          disable: false,
          tagValue: '获取验证码'
        });
        clearInterval(mytimer);
      }
    }, 1000);
  }

  _onchange(value) {
    if (isNaN(value)) {
      return;
    } else {
      this.setState({
        phone: value,
        disable: false
      });
      this.props.changePhone(value);
    }
  }
  render() {
    //手机号 api 发送验证码成功期间后手机号不可更改
    const { phoneStyle, codeStyle, container } = this.props;
    const { disable, phoneDisdbled } = this.state;
    return (
      <View style={container ? container : styles.container}>
        <TextInput
          underlineColorAndroid="transparent"
          keyboardType="numeric"
          onChangeText={value => {
            this._onchange(value);
          }}
          style={[phoneStyle ? phoneStyle : styles.phone]}
          editable={!phoneDisdbled}
          placeholder="请输入手机号"
        />
        <TouchableOpacity
          style={[codeStyle ? codeStyle : styles.code]}
          onPress={() => this._sendCode()}
        >
          <Text
            style={[
              Style.f17,
              this.state.disable ? Style.color999 : styles.codeAble
            ]}
          >
            {this.state.tagValue}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  phone: {
    flex: 1,
    fontSize: 17
  },
  code: {
    paddingLeft: 12,
    paddingRight: 12,
    width: 110,
    borderStyle: 'solid',
    borderColor: '#e5e5e5',
    borderLeftWidth: 1,
    alignItems: 'center'
  },
  codeAble: {
    color: WXStyle.mainColor
  }
});
